<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box")

    // obox.onclick = function(){
    //     console.log(1)
    // }
    // obox.onclick = function(){
    //     console.log(2)
    // }
    // obox.onclick = null;

    // ============


    // 正常浏览器的绑定和删除
    // obox.addEventListener("click", fn1)
    // obox.addEventListener("click", fn2)
    // obox.removeEventListener("click", fn1)
    // obox.removeEventListener("click", fn2)

    // IE低版本浏览器的绑定和删除
    // obox.attachEvent("onclick", fn1);
    // obox.attachEvent("onclick", fn2);
    // obox.detachEvent("onclick", fn1);

    // console.log(obox.attachEvent)

    // ===========

    // 兼容处理
    
    addEvent(obox, "click", fn2);
    removeEvent(obox, "click", fn2);

    // 事件监听式绑定事件的兼容处理
    function addEvent(ele, type, cb){
        if(ele.attachEvent){
            ele.attachEvent("on"+type, cb);
        }else{
            ele.addEventListener(type, cb);
        }
    }
    
    // 事件监听式删除事件的兼容处理
    function removeEvent(ele, type, cb){
        if(ele.detachEvent){
            ele.detachEvent("on"+type, cb);
        }else{
            ele.removeEventListener(type, cb);
        }
    }
    
    
    function fn1(){
        console.log(1);
    }
    function fn2(){
        console.log(2);
    }
</script>
</html>